<template>
    <hooyn-nav-bar 
        class="header" 
        leftIcon="" 
        :title="($route.query.title || '园区')" 
        backgroundColor="#6aa2f9" 
        leftIconfont="false" 
        leftIconColor="#fff"
        fontSize="1rem"
        color="#fff"
        :returnNav="true">
    </hooyn-nav-bar>
    <div class="detail-box">
        <div class="banner">
            <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/'+state.dataitem.Img[0].url" v-if="state.dataitem.Img" >
        </div>
        <div class="address">
            <img class="address-img" src="../../assets/address.png" alt="">
            <span>
                {{  state.dataitem.Address}}
            </span>
        </div>
        <div class="textarea">
            {{intro}}
            <div class="arrow" :class="{'arrow-top': state.shwoIntro, 'arrow': true}">
                <img v-if="state.dataitem.Description.length > state.introLenght" @click="state.shwoIntro = !state.shwoIntro" src="../../assets/arrow-down.png" alt="">
            </div>
        </div>

        <div class="serve">
            <div class="card-header">
                <div>产品展示</div>
            </div>
           
            <ul>
                <li v-for="(item, index) in state.datainfo" :key="index">
                    <!-- <img src="../../assets/ion50.png" alt="" v-if="item.Name == '汽车系列'">
                    <img src="../../assets/ion53.png" alt="" v-if="item.Name == '免喷涂系列'">
                    <img src="../../assets/ion51.png" alt="" v-if="item.Name == 'HIPS系列'"> -->
                    <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/'+item.Image[0].url" >
                    <div class="text">
                        <span class="top">{{item.Name}}</span>
                        <span class="small">{{item.Description}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="serve">
            <div class="card-header">
                <div>企业荣誉</div>
            </div>
            <div class="textarea">
                {{honor}}
                <div class="arrow" :class="{'arrow-top': state.shwoHonor, 'arrow': true}">
                    <img v-if=" state.dataitem.Honor.length > state.introLenght" @click="state.shwoHonor = !state.shwoHonor" src="../../assets/arrow-down.png" alt="">
                </div>
            </div>
        </div>
        

    </div>
</template>

<script setup>
import $api from '@/utils/api'
const route = useRoute()
const state = reactive({
    datainfo:[],
    introLenght: 100,
    shwoIntro: false,
    shwoHonor: false,
    index:'0',
    dataitem:[],
    data: [
    {
        intro: '鹏鼎控股(深圳)有限公司成立于1999年4月29日，由富葵精密组件(深圳)有限公司整体变更设立，台资企业，注册资本232043.7816万元人民币，法定代表人沈庆芳，主要从事各类印制电路板的设计、研发、制造与销售业务，产品包括柔性印刷电路板、高密度印刷电路板、硬质电路板等。',
        honor: '国家高新技术企业、国家级制造业单项冠军企业国家级知识产权优势企业、国家级企业技术中心、广东省智能制造企业、深圳市环境安全标准化管理"双百“示范企业、深圳市危险废物规范化管理”双百“示范企业、规上企业、2023年厂省制造业企业500强(第21位）。',
        addern:'深圳市宝安区罗燕街道朝阳路78号',
    },
    {
        intro: '深圳市联域光电股份有限公司(曾用名:深圳市联域光电有限公司)成立于2012年2月16日，民营企业，注册资本7320万元人民币，法定代表人潘年华，主要经营生产LED玉米灯、壁灯、面板灯、鞋盒灯、工矿灯、油站灯等产品，用工人数约1000人。',
        honor: '2022年宝安区工业百强企业、宝安区外贸百强企业、宝安区创新百强企业、国家高新技术企业、深圳市专精特新中小企业、规上企业、2022中国LED照明灯饰行业100强、2022年度中国LED行业营收50强、2022年度中国照明行业竞争力20强企业',
        addern:'深圳市宝安区燕罗街道罗田社区象山大道172号正大安工业城6栋101-601；7栋101-301；12栋101-301；17栋101-301；21栋101-201'
    },
    {
        intro: '深圳市富恒新材料股份有限公司成立于1993年04月23日，民营企业，注册资本10842万元人民币，法定代表人姚秀珠，主要经营生产塑胶工程材料产品，用工人数约170人。',
        honor: '国家高新技术企业、深圳市创新型中小企业、国家级专精特新“小巨人”企业、2022年宝安区工业300强企业规上企业、2023中国石油和化工企业500强排行榜(独立生产经营企业)第454位、2021中国石油和化工企业500强榜单(独立生产、经营企业)',
        addern:'深圳市宝安区燕罗街道罗田社区广田路48-1号A栋办公综合楼101'
    },
    ],
    produce: [
        {
            Name: '通讯类',
            detailed: '我公司生产的通讯用板涵盖主板、配板及扬声器、天线、相机、LCM、指纹辨识等多种模组板。'
        },
        {
            Name: '消费电子及计算机',
            detailed: '公司早期即涉足此领域，生产光学量测板、振动器模组板等，满足PCB高性能需求。'
        },
        {
            Name: '汽车/服务器用板及其他用版',
            detailed: '公司近年来加快了对汽车及高速服务器用板市场的开拓，相关产品已经和正在陆续获得国内外客户认证。'
        },
    ],
    producelist: [
        {
            Name: '户外照明-路灯SL04',
            detailed: '应用场景: 道路照明、体育馆、公园、停车场、社区休闲娱乐广场、各类小区、庭院。'
        },
        {
            Name: '户外照明-壁灯SWP05',
            detailed: '应用场景: 停车场、社区休闲娱乐广场、庭院、户外墙壁。'
        },
        {
            Name: '户外照明-泛光灯FL06',
            detailed: '应用场景: 道路照明、体育馆、公园、停车场、社区休闲娱乐广场、各类小区、庭院。'
        },
    ],
    produceitem: [
        {
            Name: '汽车系列',
            detailed: '在汽车领域，富恒新材料能为客户提供全方位的材料解决方案，已经成为比亚迪、小鹅等汽车品牌的合格供应商。'
        },
        {
            Name: '免喷涂系列',
            detailed: '富恒目前成功开发出ABS、PP以及PC/ABS三个系列的免喷涂材料，易成型性能优异，主要应用于家电、OA设备:汽车零部件等。'
        },
        {
            Name: 'HIPS系列',
            detailed: 'HIPS特怪卓越，韧性、耐疲劳、耐候性强，吸水率低，电气性能佳，尺寸稳定，成型性好，耐化学性强，易制阻燃品，后加工简便。'
        },
    ]
})

const intro = computed(() => {
    if (state.shwoIntro) {
        return state.dataitem.Description
    } else {
        console.log(state.dataitem.Description.length);
        let str  = ''
        if (state.dataitem.Description.length < 100) {
             str = state.dataitem.Description
        }else {
            str = state.dataitem.Description.substring(0,state.introLenght) +'...'
        }
      
        return str
    }
})

const honor = computed(() => {
    if (state.shwoHonor) {
        return state.dataitem.Honor
    } else {
        let str = state.dataitem.Honor.substring(0,state.introLenght) +'...'
        return str
    }
})
const Enterprise = () => {
    $api.Enterprisedetails({ID:route.query.ID}).then(res => {
        if ( res.message.length > 0) {
            state.dataitem =res.message[0]
            Enterprisepr(res.message[0].ID)
        }
    })
}
const Enterprisepr = (item) => {
    $api.Enterpriseproducts({AccounID:item}).then(res => {
        if ( res.message != '') {
            state.datainfo =res.message
        }
           
    })
}
watch(() => route.query.ID, () => {
  if (route.name === 'FirmDetail' && route.query.ID) {
    Enterprise()
  }
}, {
  deep: true,
  immediate: true
})
onMounted(() =>{
    state.index= route.query.ID
})
</script>
<style lang='scss' scoped>
.detail-box {
    width: 100vw;
    padding: 1rem;
    color: #333;
}
.banner {
    width: 100%;
    height: 13rem;
    img {
        width: 100%;
        height: 100%;
    }
}

.address {
    display: flex;
    padding: .75rem 0px 0rem;
    align-items: center;
    font-size: .875rem;
    .address-img {
        height: 1.3rem;
        margin-right: .375rem;
        margin-left: -2px;
    }
}

.textarea {
    font-size: .875rem;
    text-indent: 1.75rem;
    padding: .75rem 0rem 0rem;
    line-height: normal;
    position: relative;
    &+.textarea {
        padding-top: 0rem;
    }
}

.serve {
    ul {
        margin-top: .75rem;
        li {
            display: flex;
            align-items: flex-start;
            padding: 10px 0px;
            img {
                width: 6rem;
                height: 4rem;
            }
            .text {
                width: calc(100% - 6.625rem);
                display: flex;
                flex-direction: column;
                margin-left: .625rem;
                span:nth-child(1) {
                    font-size: .9375rem;
                    margin-bottom: 4px;
                    color: #5ea0ff;
                }
                span:nth-child(2) {
                    font-size: .75rem;
                    color: #878787;
                }

            }
        }
    }
}

.arrow {
    text-align: right;
    bottom: 0px;
    img {
        width: 1.2rem;
        height: 1.2rem;
        position: relative;
        top: 2px;
    }
    &.arrow-top {
        img {
            transform: rotateZ(180deg);
        }
    }
}
</style>